Skip to content

Fix incorrect view flattening when usign a specific not fully transparent color - #51379

Closed
rubennorte wants to merge 1 commit into
react:mainfrom
rubennorte:export-D74869311
Closed

Fix incorrect view flattening when usign a specific not fully transparent color#51379
rubennorte wants to merge 1 commit into
react:mainfrom
rubennorte:export-D74869311

Conversation

@rubennorte

Copy link
Copy Markdown
Member

Summary:
Changelog: [General][Fixed] Fix incorrect flattening / non-rendering of views with backgroundColor set to rgba(255, 255, 255, 127/256)

Fixes #51378.

Context

When testing some unrelated things with Fantom is realized that the color for some text that I wasn't explicitly defining was being set to rgba(255, 255, 255, 127), like here:

https://github.com/facebook/react-native/blob/249a24ac756275eadbe3b4df1ff9c974af1671d2/packages/react-native-fantom/src/__tests__/Fantom-itest.js#L540-L542

When digging a bit more about why, I realized that was actually the value for UndefinedColor. When looking a bit deeper, I saw that the value for that constant was being set like this:

using Color = int32_t;

namespace HostPlatformColor {
static const facebook::react::Color UndefinedColor =
    std::numeric_limits<facebook::react::Color>::max();
}

I'm not sure what the logic could've been here:

  • Defining it as a value out of bounds for all valid colors? In this case, it's a 32 bit value so all the range of values are actually valid RGBA colors.
  • Defining it as a fully opaque white? Seems dangerous for a default because you wouldn't be able to distinguish a explicitly set white color from a non-set color, relevant if you're seeing a white background color in a view on top of another view with any other background color.

The result of this existing logic was actually setting UndefinedColor to rgba(255, 255, 255, 127) because the alpha channel is defined in the first bits of the value, and Color being a signed int with 32 bits, the largest value is 01111....1, so extracting the first 8 bits, you get 127.

Changes

This changes the value set for the UndefinedColor constant (which is used, among other things, to determine if a view sets a background color, or otherwise could potentially be flattened).

The new value, instead of white with a 127/256 opacity, is back with 0% opacity (or simply the number 0 in int32_t).

Differential Revision: D74869311

@facebook-github-bot facebook-github-bot added CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. p: Facebook Partner: Facebook Partner labels May 16, 2025
@facebook-github-bot

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D74869311

@facebook-github-bot

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D74869311

@rubennorte
rubennorte force-pushed the export-D74869311 branch 2 times, most recently from 5897dbd to ae24f0b Compare May 20, 2025 10:46
@facebook-github-bot

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D74869311

@facebook-github-bot

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D74869311

…rent color (#51379)

Summary:

Changelog: [General][Fixed] Fix incorrect flattening / non-rendering of views with backgroundColor set to `rgba(255, 255, 255, 127/256)`

Fixes #51378.

## Context 

When testing some unrelated things with Fantom is realized that the color for some text that I wasn't explicitly defining was being set to `rgba(255, 255, 255, 127)`, like here:

https://github.com/facebook/react-native/blob/249a24ac756275eadbe3b4df1ff9c974af1671d2/packages/react-native-fantom/src/__tests__/Fantom-itest.js#L540-L542

When digging a bit more about why, I realized that was actually the value for `UndefinedColor`. When looking a bit deeper, I saw that the value for that constant was being set like this:

```
using Color = int32_t;

namespace HostPlatformColor {
static const facebook::react::Color UndefinedColor =
    std::numeric_limits<facebook::react::Color>::max();
}
```

I'm not sure what the logic could've been here:
- Defining it as a value out of bounds for all valid colors? In this case, it's a 32 bit value so all the range of values are actually valid RGBA colors.
- Defining it as a fully opaque white? Seems dangerous for a default because you wouldn't be able to distinguish a explicitly set white color from a non-set color, relevant if you're seeing a white background color in a view on top of another view with any other background color.

The result of this existing logic was actually setting `UndefinedColor` to `rgba(255, 255, 255, 127)` because the alpha channel is defined in the first bits of the value, and `Color` being a signed int with 32 bits, the largest value is `01111....1`, so extracting the first 8 bits, you get 127.

## Changes

This changes the value set for the `UndefinedColor` constant (which is used, among other things, to determine if a view sets a background color, or otherwise could potentially be flattened).

The new value, instead of white with a 127/256 opacity, is black with 0% opacity (or simply the number 0 in `int32_t`).

Reviewed By: javache

Differential Revision: D74869311
@facebook-github-bot

Copy link
Copy Markdown
Contributor

This pull request was exported from Phabricator. Differential Revision: D74869311

@react-native-bot

Copy link
Copy Markdown
Collaborator

This pull request was successfully merged by @rubennorte in b1e8729

When will my fix make it into a release? | How to file a pick request?

@Pancake-Sqk

Pancake-Sqk commented Aug 5, 2026

Copy link
Copy Markdown

@rubennorte
This issue will cause transparency to be unavailable, is there a plan to modify this issue?
#53343

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. fb-exported Merged This PR has been merged. p: Facebook Partner: Facebook Partner

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Views with a specific non-transparent background color are being incorrectly flattened

4 participants